<template>
  <div class="bookhistory">
    <div class="head">
      <div class="back">
        <router-link to="/bookrack">
          <img src="../assets/xy.png" alt="" class="img1" />
        </router-link>
      </div>
      <h3>浏览书籍历史记录</h3>
    </div>
    <van-tabs v-model="active">
      <van-tab title="已阅读">
        <div class="bookMsg">
          <div class="Allitem" v-for="(item, index) in isReadList" :key="index">
            <div class="leftimg">
              <router-link :to="`/bookDetails/${item.id}`">
                <img
                  :src="'http://statics.zhuishushenqi.com' + item.cover"
                  alt=""
                />
              </router-link>
            </div>
            <div class="middle">
              <div class="name">{{ item.title }}</div>
              <div class="zhangjie">{{ item.text }}</div>
            </div>
            <div class="right">
              <div class="racktext">已入架</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="未阅读">
        <div class="bookMsg">
          <div class="bookMsg">
            <div
              class="Allitem"
              v-for="(item, index) in noReadList"
              :key="index"
            >
              <div class="leftimg">
                <router-link :to="`/bookDetails/${item.id}`">
                  <img
                    :src="'http://statics.zhuishushenqi.com' + item.cover"
                    alt=""
                  />
                </router-link>
              </div>
              <div class="middle">
                <div class="name">{{ item.title }}</div>
                <div class="zhangjie">{{ item.text }}</div>
              </div>
              <div class="right">
                <div class="racktext">已入架</div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      rackData: [],
      isReadList: [],
      noReadList: [],
    };
  },
  created() {
    let rackData = localStorage.getItem("RackList");
    this.rackData = JSON.parse(rackData);
    console.log(this.rackData);

    let isdata = [];
    let nodata = [];
    this.rackData.forEach(function (item, index) {
      if (item.isRead == "true") {
        console.log(index);
        console.log("已读", item);
        isdata.push(item);
      } else {
        console.log("未读", item);
        nodata.push(item);
      }
    });
    this.isReadList = isdata;
    this.noReadList = nodata;
    console.log(this.isReadList);
    console.log(this.noReadList);

    // this.$axios.get("/book-info/:id")
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.head {
  display: flex;
  h3 {
    flex: 1;
    text-align: center;
  }
  .back {
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
  }
}
.bookhistory {
  margin: 4vw;
}

.bookMsg {
  margin-top: 4vw;
  .Allitem {
    margin: 4vw;
    display: flex;
    align-items: center;
    .leftimg {
      flex: 1;
      width: 20vw;
      height: 26vw;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 90%;
        height: 90%;
      }
    }
    .middle {
      flex: 2;
      // margin-left: -10vw;
      .name {
        margin-bottom: 1vw;
        font-weight: bold;
        font-size: 4vw;
      }
      .zhangjie {
        width: 90%;
        font-size: 3vw;
        color: #ccc;
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .racktext {
        font-size: 3.5vw;
        color: #f00;
        padding: 1vw 2vw;
        background: #e8e8e8;
        border-radius: 20px;
        width: 13vw;
        height: 5vw;
        text-align: center;
      }
    }
  }
}
</style>